@model CrazyToDo.Web.Models.UserViewModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PersonalHomepage</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- 可选的Bootstrap主题文件（一般不使用） -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link id="Initial_Intreface" href="~/Layout/css/Layout_black.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="~/User/css/Corpbox.css">
    <script src="~/User/js/Corpbox.js"></script>
    <script src="~/Layout/js/Layout.js"></script>
    <script src="~/User/js/ModifyPassword.js"></script>
</head>
<body>
    <div>
        <div class="Left-Navigation-Bar">
            <img class="User-Image" id="head" />
            <a href="/Home/Index"><img src="~/Layout/img/主页.png" /><span class="Navigation-Bar-Label">主页</span></a>
            <a href="/Matter/Index"><img src="~/Layout/img/任务.png" /><span class="Navigation-Bar-Label">事项</span></a>
            <a href="/Activity/Index"><img src="~/Layout/img/活动.png" /><span class="Navigation-Bar-Label">活动</span></a>
        </div>
    </div>

    <div style="float:left">
        <div class="Top-Navigation-Bar">
            <div>
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active">
                        <a href="#person" data-toggle="tab">
                            个人信息
                        </a>
                    </li>
                    <li><a href="#nickname" data-toggle="tab">修改昵称</a></li>
                    <li><a href="#ModifyPassword" data-toggle="tab">修改密码</a></li>
                </ul>
            </div>
        </div>
        <div style="clear:both"></div>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="person">
                <div style="padding:50px">
                    <div>
                        <input type="file" style="display:none">
                        <img id="headinpage" alt="" style="width:70px;height:70px;margin : 20px 20px 20px 0px;border-radius:50px" data-toggle="modal" data-target="#myAvatar">

                        <!-- 模态框（Modal） -->
                        <div class="modal fade" id="myAvatar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content" style="width:650px">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">
                                            上传头像
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="form-group">
                                            <div class="imageBox">
                                                <div class="thumbBox"></div>
                                                <div class="spinner"
                                                     }}>Loading...</div>
                                            </div>
                                            <div class="action">
                                                <div class="new-contentarea tc">
                                                    <a href="javascript:void(0)" class="upload-img">
                                                        <label htmlFor="upload-file">上传</label>
                                                    </a>
                                                    <input type="file" class="" name="upload-file" id="upload-file" />
                                                </div>
                                                <input type="button" id="btnCrop" class="Btnsty_peyton" value="裁剪" />
                                                <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" />
                                                <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" />
                                            </div>
                                            <div class="cropped"></div>
                                            @*<button type="button"  className="btn btn-primary">change</button>*@
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                            关闭
                                        </button>
                                        <button type="button" class="btn btn-primary" id="change-button">
                                                确认
                                            </button>
                                    </div>
                                </div><!-- /.modal-content -->

                            </div>
                        </div>


                    </div>

                    <h4 class="modal-title" id="myModalLabel" style="padding:10px 10px 10px 0px"><label>昵称 </label> &nbsp;  @Model.NickName</h4>
                    <h4 class="modal-title" id="myModalLabel" style="padding:10px 10px 10px 0px"><label>邮箱 </label> &nbsp;  @Model.Email</h4>
                    <h4 class="modal-title" id="myModalLabel" style="padding:10px 10px 10px 0px"><label>积分 </label> &nbsp;  @Model.Score</h4>

                </div>
            </div>
            <div class="tab-pane fade" id="nickname" style="width:340px">
                <form action="/User/ModifyNickName" method="post">
                    <div class="modal-body" >
                        <div class="form-group">
                            <label for="name">新的昵称</label>
                            <input type="text" class="form-control" name="nickname"
                                   placeholder="新的昵称" required="required">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">
                            修改
                        </button>
                    </div>
                </form>
            </div>

            <div class="tab-pane fade" id="ModifyPassword" style="width:340px">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">原有密码</label>
                        <input type="password" class="form-control" id="password"
                               placeholder="密码" required="required">
                    </div>
                    <div class="form-group">
                        <label for="name">新的密码</label>
                        <input type="password" class="form-control" id="newPassword"
                               placeholder="新的密码" required="required">
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="modify-btn" class="btn btn-primary" onclick="ModifyPassword()">
                        修改
                    </button>
                </div>
            </div>

            <div id="tip">

            </div>
        </div>
    </div>
    <script src="~/User/js/Submit.js"></script>
</body>
</html>




